<template>
  <div>
    <h1>MandyTest2</h1>
    <button class="c-Button c-Button--close">X</button>
    <button :class="[$style.button, $style.buttonClose]">Y</button>
    <el-button v-if="hasPermission('/sysadmin/test2/reserve1')">reserve1</el-button>
    <el-button v-if="hasPermission('/sysadmin/test2/reserve2')">reserve2</el-button>
    <el-button v-if="hasPermission('/sysadmin/test2/reserve3')">reserve3</el-button>
    <el-button v-if="hasPermission('/sysadmin/test2/reserve4')">reserve4</el-button>
    <el-button v-if="hasPermission('/sysadmin/test2/reserve5')">reserve5</el-button>
    <el-button v-if="hasPermission('/sysadmin/test2/reserve6')">reserve6</el-button>
    <el-button v-if="hasPermission('/sysadmin/test2/reserve7')">reserve7</el-button>
    <el-button v-if="hasPermission('/sysadmin/test2/reserve8')">reserve8</el-button>
    <div>
      <el-table :data="tableData"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                default-expand-all
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="date"
                         label="日期"
                         sortable
                         width="180">
        </el-table-column>
        <el-table-column prop="name"
                         label="姓名"
                         sortable
                         width="180">
        </el-table-column>
        <el-table-column prop="address"
                         label="地址">
        </el-table-column>
      </el-table>

      <el-table :data="tableData1"
                style="width: 100%"
                row-key="id"
                border
                lazy
                :load="load"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="date"
                         label="日期"
                         width="180">
        </el-table-column>
        <el-table-column prop="name"
                         label="姓名"
                         width="180">
        </el-table-column>
        <el-table-column prop="address"
                         label="地址">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { hasPermission } from "@/utils/dict";

export default {
  name: "MandyTest2",

  data() {
    return {
      myMap: null,
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        children: [{
          id: 31,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 ppp 弄'
        }, {
          id: 32,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 hhh 弄'
        }]
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      tableData1: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        hasChildren: true
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    };
  },

  methods: {
    hasPermission(url) {
      return hasPermission(url)
    },
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: 31,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id: 32,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }
        ])
      }, 1000)
    },
  }
};
</script>

<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>

<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>
